<template>
	<div class="head">

	  <div class="left" v-show="titleShow">
	  	<img src="../assets/left-arrow.svg" alt="" class="icon left-arrow" @click="goback">
		  <span>绑定订单</span>
	  </div>

		<div class="right">		  

			<img src="../assets/sweep.svg" alt="" class="icon big" @click="qrcode" v-show="false">

			<img src="../assets/customer_service.svg" alt="" class="icon big" @click="customer_service">

			<div class="tips" v-show="tipsShow">				
				<div>
					<a href="tel:400-855-7783">电话咨询</a>
				</div>				
			</div>			

		</div>		
	</div>
</template>

<script>
	export default {
		name: 'AppHeader',
		data: function () {
			return { tipsShow: false }
		},
		methods: {
			goback: function () {
				// alert('return')
			},
			qrcode: function () {
				// alert('qrcode')
			},
			customer_service: function () {				
				this.tipsShow = !this.tipsShow
			}
		},
		props: [ 'titleShow', 'qrShow' ]
	}
</script>

<style lang="less">
	.head {
		color: white;
		position: relative;
		
		height: 40px;
		>div {
			position: absolute;			
			display: flex;			
			align-items: center;			
		}
		div.left { top: 0; left: 0; }
		div.right { top: 0; right: 0; }
		.tips {			
			position: absolute;
			z-index: 2;
			background: white;
			color: #808080;
			font-size: 12px;
			width: 88px;
			right: 2px;
			top: 18px;
			text-align: center;			
			border-radius: 5px;
			box-shadow: 0px 0px 8px #aaa;
			margin-top: 18px;
			a {
				color: #808080;
				text-decoration: none;
			}
			>div {
				padding: 8px 0px;				
			}
			>div:nth-child(n+2) {
				border-top: 1px solid #eee;
			}
			&:after {
				position: absolute;
				content: "";
				width: 0px;
				height: 0px;
				border-top: 9px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 9px solid white;
				border-left: 6px solid transparent;
				top: -18px;
				right: 10px;
			}
		}
		span { font-size: 16px; margin-left: 12px; }
		.icon { height: 14px; }
		.icon.big { height: 24px; margin: 0 6px; }
	}
</style>